<template>
  <table-easy :list="list.list"
              ref="tableRef"
              :columns="columns"
              :filterArr="filterArr"
              :tableType="tableType"
              :showIndex="true"
              :showSelect="false"
              :default-sort="{ prop: 'latestlogtime', order: 'descending' }"
              :showPagination="true"
              :showBatchAction="false"
              @updateList="updateList"
              :total="total">
    <!-- 表头插槽 -->
    <template #index>序号</template>
    <!-- 表格插槽 -->
    <template #avatar="{row}">
      <el-avatar v-if="row.avatar" :size="50" :src="row.avatar" />
      <span v-else>_</span>
    </template>
    <template #latestlogtime="{row}">
      {{ formatTime(row.latestlogtime) }}
    </template>
    <template #operation="{row}">
      <el-button v-able text type="primary" @click="handleLoginLog(row)">访问日志</el-button>
    </template>
    <!-- 筛选器插槽 -->
    <template #fields="{selectedCondition,filterConditions}">
      <div v-for="domain in selectedCondition" :key="domain.key">
        <el-form-item :label="domain.label" :prop="domain.key">
          <el-input v-if="domain.key==='name'" v-model="filterConditions.name" clearable placeholder="请输入"/>
          <el-input v-if="domain.key==='nickname'" v-model="filterConditions.nickname" clearable placeholder="请输入"/>
        </el-form-item>
      </div>
    </template>
  </table-easy>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import TableEasy from '@/components/TableEasy.vue'
import { formatTime } from '@/tools/index'
export interface List{
  name: string,
  role: string,
  nickname: string,
  avatar: string
}
interface ListWraper{
  list:List[]
}
const tableType = 'customer'
const list = reactive<ListWraper>({ list: [] })
const columns = [
  {
    key: 'name',
    label: '姓名',
    width: 120,
    search: true,
    sortable: true
  },
  {
    key: 'avatar',
    label: '头像',
    width: 80,
    search: false,
    sortable: false
  },
  {
    key: 'nickname',
    label: '昵称',
    width: 90,
    search: true,
    sortable: true
  },
  {
    key: 'role',
    label: '角色',
    width: 90,
    search: false,
    sortable: true
  },
  {
    key: 'scoreNum',
    label: '成绩数',
    width: 100,
    search: false,
    sortable: true
  },
  {
    key: 'logtimes',
    label: '登录次数',
    width: 120,
    search: false,
    sortable: true
  },
  {
    key: 'latestlogtime',
    label: '最近登录时间',
    width: 175,
    search: false,
    sortable: true
  },
  {
    key: 'operation',
    label: '操作',
    width: 89,
    search: false,
    sortable: false
  }
]
// 默认筛选器
const filterArr = [
  {
    filterAttrs: [
      { key: 'name', show: true, value: [] },
      { key: 'nickname', show: true, value: [] }
    ],
    filterName: '查询条件',
    filterType: tableType,
    id: 101,
    isCurrent: true,
    isSystem: 1,
    selected: 1
  }
]
import { customerService } from '@/service/index'
const total = ref(0)
let filterInfo = {} // 记录筛选条件，监听到webSocket消息变化时刷新列表
const updateList = (val: any) => {
  filterInfo = val
  customerService.post('/list', val).then((res: any) => {
    list.list = res.data
    total.value = res.total
  }).catch((err) => {
    console.log(err)
  })
}
const tableRef = ref()
// 访问日志
const handleLoginLog = (row: List) => {
  console.log(row)
}
// 处理webSocket消息
import { watch } from 'vue'
import { webSocketStore } from '@/stores/webSocket'
const socketStore = webSocketStore()
watch(() => socketStore.message, (val: any) => {
  if ([1, 2].includes(val.type)) {
    updateList(filterInfo)
  }
}, { deep: true, immediate: true })
</script>
<style lang="less" scoped>

:deep(.el-tabs__header.is-top) {
  padding-right: 125px;
}
:deep(.el-button.is-text){
  padding:8px 2px;
}
</style>
